<script setup>
import { RouterView } from 'vue-router'
import NavBar from './components/NavBar.vue'
import { ref, watch, provide } from 'vue'

const isDarkMode = ref(false)

// 提供一个可以被其他组件访问的切换函数
const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value
}

// 监听深色模式变化并应用到整个文档
watch(isDarkMode, (newValue) => {
  document.documentElement.classList.toggle('dark-mode', newValue)
  document.body.style.backgroundColor = newValue ? 'var(--bg-color)' : ''
  document.body.style.transition = 'background-color 0.3s ease'
})

// 提供深色模式状态和切换函数给子组件
provide('darkMode', {
  isDarkMode,
  toggleDarkMode
})

// 导出供其他组件使用
defineExpose({
  isDarkMode,
  toggleDarkMode
})
</script>

<template>
  <div class="app">
    <NavBar />
    <main class="main-content">
      <RouterView />
    </main>
  </div>
</template>

<style>
:root {
  --bg-color: #f5f5f5;
  --text-color: #333;
  --card-bg: #fff;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --hover-shadow: rgba(0, 0, 0, 0.15);
}

:root.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --card-bg: #2d2d2d;
  --card-shadow: rgba(0, 0, 0, 0.3);
  --hover-shadow: rgba(0, 0, 0, 0.4);
}

/* 确保深色模式应用到整个页面 */
:root.dark-mode body {
  background-color: var(--bg-color);
}
</style>

<style scoped>
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg-color);
  transition: background-color 0.3s ease;
}


.main-content {
  padding: 0 2rem;
  /* max-width: 2280px; */
  margin: 0 auto;
  padding-top: 80px; /* 为固定导航栏留出空间 */
  width: 100%;

}

@media (max-width: 768px) {
  .main-content {
    padding: 0 1rem;
  }
}
</style>
